<template>
  <div class="app-container">
    <div class="filter-condition">
      <label>条件搜索</label>
      <el-form
        size="mini"
        :inline="true"
        class="mini-form"
        style="flex: 1"
        :model="filterCondition"
        @submit.native.prevent
      >
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="filterCondition.name"
              placeholder="名称"
              prefix-icon="el-icon-search"
              clearable
              @change="getList"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
              v-model="filterCondition.type"
              clearable
              placeholder="请选择类型"
              @change="getList"
            >
              <el-option
                v-for="item in typeList"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <el-row>
      <el-col :span="2">
        <label class="row-label">业务操作</label>
      </el-col>
      <el-col :span="22" class="align-right">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd"
          >
            {{ $t('table.add') }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="handleUpdate"
          >
            {{ $t('table.update') }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-delete"
            class="deleted-button"
            @click="handleDelete"
          >
            {{ $t('table.batchDeletion') }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            class="refresh-button"
            @click="handleRefresh"
          >
            {{ $t('table.refresh') }}
          </el-button>
        </el-button-group>
      </el-col>
    </el-row>
    <client-table
      ref="mainTable"
      v-loading="loading"
      :style="{ height: `${commonLayoutHeight}px` }"
      :columns="columns"
      :data="rowData"
      tree-data
      :fold-header="'typeList'"
      :auto-group-column-def="autoGroupColumnDef"
      @row-dblclick="handleRowClick"
      @selection-change="handleSelectionChange"
    />
    <const-dialog
      :visible.sync="dialogFormVisible"
      :action-type="actionType"
      :data="temp"
      :type-list="typeList"
      :multiple="multipleSelection"
      @add-data="handleRefresh"
      @refresh-data="handleRefresh"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ConstDialog from './components/ConstDialog'
import { getList, deleteOne } from '@/api/information'

export default {
  name: 'Constant',
  components: {
    ConstDialog
  },
  data() {
    return {
      columns: [
        {
          headerName: '名称',
          field: 'name'
        },
        {
          headerName: '创建时间',
          field: 'createTime'
        },
        {
          headerName: '修改时间',
          field: 'modifyTime'
        }
      ],
      autoGroupColumnDef: {
        headerName: '类型编码',
        width: 150,
        cellRendererParams: {
          suppressCount: false
        }
      },
      rowData: [],
      filterCondition: {
        name: '',
        type: ''
      },
      temp: {
        name: '',
        type: ''
      },
      originalTemp: {
        name: '',
        type: ''
      },
      typeList: [],
      multipleSelection: [],
      loading: false,
      actionType: 'add',
      dialogFormVisible: false
    }
  },
  computed: {
    ...mapState('app', {
      commonLayoutHeight: state => state.height.clientHeight - 225
    })
  },
  created() {
    this.getList()
    this.getConstantList()
  },
  methods: {
    // 表格数据
    async getList() {
      this.loading = true
      const result = await getList('getConstant', this.filterCondition)
      if (result.code === 200) {
        this.rowData = result.data.pageItems
        setTimeout(() => {
          this.loading = false
          this.$refs.mainTable.setColumnWidth()
        }, 200)
      }
    },
    async getConstantList() {
      const result = await getList('getConstantList')
      if (result.code === 200) {
        this.typeList = result.data.pageItems
      }
    },
    // 新增
    handleAdd() {
      this.resetTemp()
      this.actionType = 'add'
      this.dialogFormVisible = true
    },
    // 修改
    handleUpdate() {
      if (this.multipleSelection.length === 0) {
        return this.$message({
          showClose: true,
          message: '请选择一条数据！',
          type: 'warning',
          center: true
        })
      }
      this.setTemp(this.multipleSelection[0])
      this.actionType = 'update'
      this.dialogFormVisible = true
    },
    handleRowClick(row) {
      if (row.canModify === 0) {
        this.setTemp(row)
        this.actionType = 'view'
        this.dialogFormVisible = true
      } else {
        this.setTemp(row)
        this.actionType = 'update'
        this.dialogFormVisible = true
      }
    },
    // 删除
    handleDelete() {
      this.$confirm('确认要删除该行吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const typeCodes = this.multipleSelection.map(item => item.typeCode)
        const res = await deleteOne('getConstantDelete', { typeCodes })
        if (res.code === 200) {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.handleRefresh()
        }
      }).catch(() => {
      })
    },
    setTemp(tmp) {
      this.temp = Object.assign({}, this.originalTemp, tmp)
    },
    // 重置
    resetTemp() {
      this.temp = Object.assign({}, this.originalTemp)
    },
    // 刷新
    handleRefresh() {
      this.getList()
      this.getConstantList()
      this.resetTemp()
      this.multipleSelection = []
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .ag-group-value{
  width: 100% !important;
}
::v-deep .ag-ltr .ag-row-group-leaf-indent{
  margin-left: 0px !important;
}
::v-deep .ag-ltr .ag-group-contracted{
  margin-right: 2px !important;
}
::v-deep .ag-ltr .ag-row-group-indent-1{
  padding-left: 5px !important;
}
::v-deep .ag-ltr .ag-row-group-indent-2{
  padding-left: 15px !important;
}
</style>
